<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>定时发布</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="http://v3.bootcss.com/dist/css/bootstrap.css" />
<style>
body, h2, h3 {font-family:'微软雅黑';}
.date {margin-bottom:20px;text-align:center;font-size:0;color:#666;:red;overflow:hidden;}
	.date i {margin-right:10px;font-size:45px;color:#666;color:#999;}
	.date span {display:inline-block;position:relative;padding:0 10px 0 20px;font-size:50px;vertical-align:top;line-height:1.02;overflow:hidden;}
		.date span:after {content:':';position:absolute;top:-4px;left:0;width:10px;}
		.date .d-hour:after {display:none;}

.box, .url-list {padding:20px;border:1px solid rgba(0,0,0,.15);}
.box {border-radius:4px 4px 0 0;}
	.box textarea {margin-bottom:10px;resize:none;}
	.box .btn {margin-right:10px;}
.url-list {position:relative;border-top:0;border-radius:0 0 4px 4px;background:#f7f7f9;}
.url-list:after {content:'待发布';position:absolute;top:-1px;left:-1px;padding:3px 7px;border:1px solid #ddd;border-bottom-right-radius:4px;background:#fff;}
	.url-list ol {margin:0;padding-top:40px;}
		.url-list li {position:relative;z-index:0;margin:0;padding:5px;border-radius:5px;}
		.url-list li:hover {background:#d5d5d5;}
			.url-list a, .url-list a:hover {color:#06c;}
			.url-list span {position:absolute;top:4px;right:7px;width:21px;text-align:center;cursor:pointer;font:100 14px/1.5 verdana;color:#999;overflow:hidden;}
			.url-list span:hover {color:#06c;}
.ul-wait {border-radius:0;}
.ul-history:after {content:'已发布';}
</style>
</head>
<body>
<div class="container">
	<h2 class="date" id="date">
		<i class="glyphicon glyphicon-time"></i>
		<span class="d-hour">-</span>
		<span class="d-minutes">-</span>
		<span class="d-second">-</span>
	</h2>
	<div class="row main">
		<div class="box">
			<textarea name="" class="form-control inp-atxt" rows="4" cols="" id="add-box"></textarea>
			<button type="button" class="btn btn-primary" id="btn-add">添加到待发布</button>
		</div>
		<div class="url-list ul-wait">
			<ol id="ul-wait-main"></ol>
		</div>
		<div class="url-list ul-history">
			<ol id="ul-his-main"></ol>
		</div>
	</div>
</div>
<script src="http://img.lovewith.me/static/js/lib/jquery.js"></script>
<script>
var timerTask = function(){
	this.cache = {
		storeKey: 'weibo_url',
		element: $('#ul-wait-main')
	}
}
timerTask.prototype = {
	render: function(){
		var self = this;
		var cache = self.cache;

		//添加到带发布列表
		$('#btn-add').bind('click', function(){
			var urls = $.trim($('#add-box').val());

			if(urls != ''){
				self._addToList({
					urls: urls.split('\n'),
					store: true
				});
				$('#add-box').val('');
			}
		});

		//单挑删除
		cache.element.on('click', 'span', function(e){
			$(this).parent().remove();
			self._removeStore($(this).prev('a').html());
		});

		self._restoreURL();
	},

	/*
	 * obj.urls
	 * obj.store true|false
	 */
	_addToList: function(obj){
		var self = this;
		var cache = this.cache;

		$.each(obj.urls, function(i, url){
			if(!self._isExist(url)){
				cache.element.append(
					'<li><a href="'+ url +'" target="_blank">'+ url +'</a>'+
					'<span>x</span></li>'
				);

				if(obj.store){
					self._addToStore(url);
				}
			}
		})
	},

	//判断url是否已经添加
	_isExist: function(url){
		var cache = this.cache;
		var isExist = false;
		var target = null;

		cache.element.find('a').each(function(){
			var text = $(this).html();
			if(text == url){
				target = $(this).parent();
				isExist = true;
			}
		});

		if(target){
			this._blink(target);
		}
		return isExist;
	},

	_blink: function(el){
		var self = this;
		var cache = self.cache;

		el.css('background', '#d5d5d5');
		setTimeout(function(){
			el.css('background', '#f7f7f9');
		}, 150);
		setTimeout(function(){
			el.css('background', '#d5d5d5');
		}, 300);
		setTimeout(function(){
			el.css('background', '#f7f7f9');
			el.removeAttr('style');
		}, 450);
	},

	//添加到localstorage
	_addToStore: function(url){
		var cache = this.cache;
		var store = window.localStorage;
		var storeURLs = store.getItem(cache.storeKey);
		var hasExist = true;

		if(!storeURLs){
			storeURLs = url;
		}else if(storeURLs.indexOf(url) == -1){
			storeURLs += '@_@'+ url;
		}

		store.setItem(cache.storeKey, storeURLs);
	},

	//从storage中删除某个url
	_removeStore: function(url){
		var cache = this.cache;
		var storeURLs = window.localStorage.getItem(cache.storeKey);
		var newURLs = [];

		if(storeURLs && storeURLs != ''){
			var urls = storeURLs.split('@_@');

			$.each(urls, function(i, u){
				if(u != url){
					newURLs.push(u);
				}
			});

			window.localStorage.setItem(cache.storeKey, newURLs.join('@_@'));
		}
	},

	//从localStorage中还原url
	_restoreURL: function(){
		var cache = this.cache;
		var storeURLs = window.localStorage.getItem(cache.storeKey);

		if(storeURLs && storeURLs != ''){
			this._addToList({
				urls: storeURLs.split('@_@'),
				store: false
			});
		}
	}
};
new timerTask().render();
</script>
</body>
</html>